<template>
  <div v-if="dialogAppealForm" style="width:100vw ;height: 100vh; position:absolute; top: 0; overflow: hidden; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px);">
    <img :src="coverAdvance" alt="" style="width: 100vw; z-index: 0">
  </div>
  <div v-else style="width:100vw ;height: 100vh; position:absolute; top: 0; overflow: hidden; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px);">
    <img :src="coverAdvance" alt="" style="width: 100vw; z-index: 0">
  </div>
  <navigator-menu></navigator-menu>

  <el-button v-if="!dialogAppealForm" type="primary" @click="dialogAppealForm=true;">15165165165</el-button>
  <!-- 申诉 -->
  <el-card v-if="dialogAppealForm" shadow="always" style="width:23vw; height:33vw; border-radius: 35px 35px 35px 35px; margin: 9vw 15vw 1vw 36vw; opacity: 0.95">
      <span style="font-size: 25px;">申诉</span>
      <el-divider></el-divider>
      <h4>申诉原因</h4>
      <el-select v-model="appealType" placeholder="请选择申诉原因">
        <el-option-group
          v-for="group in appealMsg"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-option-group>
      </el-select>
      <h4>补充理由描述</h4>
      <el-input v-model="appealReason" :rows="3" type="textarea" placeholder="请详细描述您的申诉理由(不多于500字)："></el-input>
      <h4>补充截图证明</h4>
      <el-upload
        class="avatar-uploader"
        action="http"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="appealImageUrl" :src="appealImageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
      </el-upload>
      <el-button type="primary" style="margin:10px 0 0 4vw;" @click="sendAppeal">申诉</el-button>
      <el-button type="primary" style="margin:10px 0 0 3vw;" @click="undoAppeal">取消</el-button>
  </el-card>

  <el-dialog
    v-model="confirmAppealForm"
    title="确认申诉"
    width="30%"
  >
    <span>确认提交申诉？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmAppealForm = false; dialogAppealForm = false;">确认</el-button>
        <el-button @click="confirmAppealForm = false">取消</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script>
import { ref } from '@vue/reactivity';
import NavigatorMenu from "../components/NavigatorMenu";

export default {
  name: "Appeal",
  components: {
    NavigatorMenu,
  },
  mounted() {
    this.dialogAppealForm=true
    this.confirmAppealForm=false
  },
  data() {
    return {
      dialogAppealForm,
      confirmAppealForm,
      appealType: '',
      appealMsg: [{
        label: '个人资料违规',
        options: [{
          value: '头像违规',
          label: '头像违规',
        },{
          value: '签名违规',
          label: '签名违规',
        }]
      },{
        label: '个人信息不实',
        options: [{
          value: '冒名顶替',
          label: '冒名顶替',
        },{
          value: '冒领论文',
          label: '冒领论文',
        },{
          value: '不属于该机构',
          label: '不属于该机构',
        }]
      },{
        label: '个人行为不当',
        options: [{
          value: '发表不当言论',
          label: '发表不当言论',
        },{
          value: '传播虚假言论',
          label: '传播虚假言论',
        },{
          value: '侵犯隐私',
          label: '侵犯隐私',
        },{
          value: '引战',
          label: '引战',
        },{
          value: '垃圾广告',
          label: '垃圾广告',
        }]
      },{
        label: '其他',
        options: [{
          value: '其他原因',
          label: '其他原因',
        }]
      }],
      appealReason: '',
      appealImageUrl: '',
      coverAdvance: require('../assets/images/apple.jpg'),
    }
  },
  methods :{
    sendAppeal() {
        if(appealMsg.length==0){
            this.$message({
              message: '请选择申诉类别或输入申诉理由！',
              type: 'error'
            })
        }
        else{
          confirmAppealForm = true;
          this.$message({
            message: '申诉提交成功',
            type: 'success'
          })
        }
    },
    undoAppeal() {
      console.log('undoAppeal!')
      appealImageUrl = ''
      appealType = ''
      appealReason = ''
      dialogAppealForm = false
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('Avatar picture must be JPG format!')
      }
      if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
      }
      return isJPG && isLt2M
    },
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 45px; /* (120px - 28px) / 2 - 1px */
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
